<%@page import="java.util.ArrayList"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019/12/4
  Time: 15:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.example.association2.model.User" %>
<%@ page import="com.example.association2.model.Association" %>
<%@ page import="java.util.List" %>
<%@ page import="static java.lang.Integer.parseInt" %>

<html lang="zh-CN">
<head>
    <%@include file="../head.jsp" %>
        <!-- 引入 echarts.js -->
    <script src="../static/js/echarts.min.js"></script>
</head>
<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <!-- 引入bar -->
        <jsp:include page="../sidebar.jsp"/>
        <jsp:include page="../topbar.jsp"/>
        <!-- page content -->
     	<div class="right_col" role="main">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    	<div id="main1" style="width: 50%;height:50%; position:absolute;left:250px;top:80px;"></div>
    	<div id="main2" style="width: 50%;height:50%; position:absolute;left:800px;top:80px;"></div>
    	</div>
   		 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var list1 = ${Form1};
        var list2 = ${Form2};
        
        // 指定图表的配置项和数据
        var option1 = {
        	    title: {
        	        text: '社团类型及数量分布',
        	        left: 'center'
        	    },
        	    tooltip: {
        	        trigger: 'item'
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        left: 'left',
        	    },
        	    series: [
        	        {
        	            name: '社团数量',
        	            type: 'pie',
        	            radius: '50%',
                        data: list1,
        	            emphasis: {
        	                itemStyle: {
        	                    shadowBlur: 10,
        	                    shadowOffsetX: 0,
        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        	                }
        	            }
        	        }
        	    ]
        	};
        var option2 = {
        	    title: {
        	        text: '社团类型及其活动数量分布',
        	        left: 'center'
        	    },
        	    tooltip: {
        	        trigger: 'item'
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        left: 'left',
        	    },
        	    series: [
        	        {
        	            name: '活动数量',
        	            type: 'pie',
        	            radius: '50%',
                        data: list2,
        	            emphasis: {
        	                itemStyle: {
        	                    shadowBlur: 10,
        	                    shadowOffsetX: 0,
        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        	                }
        	            }
        	        }
        	    ]
        	};

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
    </script>
    </div>
</div>
<!-- /page content -->
<jsp:include page="../footer.jsp"/>
</body>
</html>
